import React                    from 'react';
import {connect}                from "react-redux";

import Empty                    from '../../components/form/Empty';
import PullUp                   from '../../components/form/PullUp';
import Pagination               from '../../components/Pagination';
import {Tabs, Tab}              from '../../components/nav/Tabs';
import {
    out,
    edit,
    loadInList,
    loadOutList
}                               from "../../actions/store";
import './store.scss';

const TABS = {
    IN: 'in',
    OUT: 'out',
};

class Store extends Pagination {

    state = {
        openId: '',
        inList: [],
        outList: [],
    };

    tab = TABS.IN;

    _method = () => 'loadInList';
    _getList = () => 'inList';
    _setTitle = () => document.title = '下架管理';

    _refresh(){
        this.changeTab(this.tab);
    }

    changeTab(tab){
        this.tab = tab;
        super.reset();
        this._method = () => `load${_.upperFirst(tab)}List`;
        this._getList = () => `${tab}List`;
        this.setState({openId: ''});
        this.load();
    }

    toggle(id){
        this.setState({openId: this.state.openId === id ? '' : id});
    }

    out(item){
        this.props.out(item).then(this._refresh.bind(this));
    }

    edit(item){
        this.props.edit(Object.assign({}, item, this.refs.edit.state)).then(this._refresh.bind(this));
    }

    render(){
        var {inList, outList, openId} = this.state;
        return (
            <div className="store">
                <Tabs init={this.tab} onChange={this.changeTab.bind(this)}>
                    <Tab key={TABS.IN} title="未下架">
                        <PullUp load={this.reload.bind(this)}>
                            {inList.map(m =>
                                <React.Fragment key={m.id}>
                                    <div className="r-item flex-avg" onClick={() => this.toggle(m.id)}>
                                        <div className="ri-left">
                                            <div>{m.name}</div>
                                            <div>入库时间：{m.storeTime}</div>
                                            <div>
                                                <span>已兑数量：{m.storeExCount}</span>
                                                <span>剩余库存：{m.count}</span>
                                                <span>总库存：{m.storeTotal}</span>
                                            </div>
                                        </div>
                                        <div className="ri-right">
                                            <div className="btn primary">操作</div>
                                        </div>
                                    </div>
                                    {
                                        m.id === openId &&
                                        <div className="s-edit flex-avg">
                                            <div className="btn primary" onClick={() => this.out(m)}>下架</div>
                                            <Edit item={m} ref="edit"/>
                                            <div className="btn primary" onClick={() => this.edit(m)}>确认修改</div>
                                        </div>
                                    }
                                </React.Fragment>
                            )}
                        </PullUp>
                    </Tab>
                    <Tab key={TABS.OUT} title="已下架">
                        <Empty list={outList} type="store">
                            <PullUp load={this.reload.bind(this)}>
                                {outList.map(m =>
                                    <div key={m.id} className="r-item flex-avg">
                                        <div className="ri-left">
                                            <div>{m.name}</div>
                                            <div>下架时间：{m.time}</div>
                                            <div>
                                                <span>已兑数量：{m.total - m.count}</span>
                                                <span>下架数量：{m.count}</span>
                                            </div>
                                        </div>
                                        <div className="ri-right s-rr flex-avg">
                                            <div className="btn primary disable">已下架</div>
                                            <div className="s-own">下架人：{m.own}</div>
                                        </div>
                                    </div>
                                )}
                            </PullUp>
                        </Empty>
                    </Tab>
                </Tabs>
            </div>
        );
    }

}

class Edit extends React.Component {

    item = this.props.item || {};

    state = {
        rule: _.invoke(this.item, 'accumRule.join', ''),
        range: _.invoke(this.item, 'accumRange.join', ''),
        principle: this.item.accumPrinciple,
    };

    handleChange = key => e => this.setState({[key]: e.target.value});

    render(){
        var {principle, rule, range} = this.state;
        return (
            <div className="se-form">
                <textarea
                    rows="2"
                    value={principle}
                    onChange={this.handleChange('principle')}
                />
                <textarea
                    rows="8"
                    value={rule}
                    onChange={this.handleChange('rule')}
                />
                <textarea
                    rows="2"
                    value={range}
                    onChange={this.handleChange('range')}
                />
            </div>
        );
    }

}

export default connect(undefined, {out, edit, loadInList, loadOutList})(Store);
